<!DOCTYPE>
<html>

<head>
	<title>聊天室</title>
	<script src="./js/jquery-1.12.3.min.js"></script>
	<link rel="stylesheet" href="./css/wrap.css"></link>
	<link rel="stylesheet" href="/css/chat.css"></link>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<style>
	</style>
</head>

<body>
	<div class="header" id="header">
		<div>
			<p class="banner"><span @click="toOther(info.role ? '/admin' : '/master')">社区空间</span><span @click="toOther('/index')" class="actived">聊天室</span><span
					@click="toOther('/search')">用户</span></p>
			<div class="name" @click="toOther('/info')"><img :src="info.picture" /><span>{{info.nick}}</span></div>
		</div>
	</div>
	<div style="display: none" class="wrap">
		<!--包裹所有元素的容器-->
		<div class="cube">
			<!--前面图片 -->
			<div class="out_front">
				<img src="/images/out_front.png" class="pic">
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="/images/out_back.png" class="pic">
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="/images/out_left.png" class="pic">
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="/images/out_right.png" class="pic">
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="/images/out_top.png" class="pic">
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="/images/out_bottom.png" class="pic">
			</div>

			<!--小正方体 -->
			<span class="in_front">
				<img src="/images/in_front.png" class="in_pic">
			</span>
			<span class="in_back">
				<img src="/images/in_back.png" class="in_pic">
			</span>
			<span class="in_left">
				<img src="/images/in_left.png" class="in_pic">
			</span>
			<span class="in_right">
				<img src="/images/in_right.png" class="in_pic">
			</span>
			<span class="in_top">
				<img src="/images/in_top.png" class="in_pic">
			</span>
			<span class="in_bottom">
				<img src="/images/in_bottom.png" class="in_pic">
			</span>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">当前登录用户</h3>
					</div>
					<div class="panel-body">
						<div class="list-group">
							<a href="#" class="list-group-item">你好，<span id="user"></span></a>
							<a href="logout" class="list-group-item">退出</a>
						</div>
					</div>
				</div>
				<div class="panel panel-primary" id="online">
					<div class="panel-heading">
						<h3 class="panel-title">当前在线的其他用户</h3>
					</div>
					<div class="panel-body">
						<div class="list-group" id="users">
						</div>
					</div>
				</div>
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">群发系统广播</h3>
					</div>
					<div class="panel-body">
						<input type="text" class="form-control" id="msg" /><br>
						<button id="broadcast" type="button" class="btn btn-primary">发送</button>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title" id="talktitle"></h3>
					</div>
					<div class="panel-body">
						<div class="well" id="log-container" style="height:400px;overflow-y:scroll">

						</div>
						<input type="text" id="myinfo" class="form-control col-md-12" /> <br>
						<button id="send" style="margin-top: 20px" type="button" class="btn btn-primary">发送</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
	<script>
		new Vue({
			el: '#header',
			data() {
				return {
					info: {
                        nick: '',
                        picture: '',
						role: '',
                    },
				}
			},
			created() {
                this.getInfo();
			},
			methods: {
				toOther(url) {
                    window.location.href = url
                },
				getInfo() {
					let that = this;
                    ajax({
                        type: 'get',
                        url: '/myInfo',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if (res.code == 200) {
								that.info.role = res.data.role ? true : false;
                                that.info.nick = res.data.nick;
                                that.info.picture = res.data.picture ? res.data.picture : '/images/people.png'
                            }
                        }
                    })
				}
			}
		})
		Date.prototype.format = function (fmt) {
			var o = {
				"M+": this.getMonth() + 1,                 //月份 
				"d+": this.getDate(),                    //日 
				"h+": this.getHours(),                   //小时 
				"m+": this.getMinutes(),                 //分 
				"s+": this.getSeconds(),                 //秒 
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
				"S": this.getMilliseconds()             //毫秒 
			};
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			}
			for (var k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				}
			}
			return fmt;
		}


		$(document).ready(function () {
			var user;
			var uid;
			// 指定websocket路径
			var websocket;
			var role;
			var status;
			$.get("/currentuser", function (data) {
				user = data.username;
				uid = data.staffId;
				role = data.role
				status = data.status
				if(status == 1){
					alert("账户被禁用")
					window.location.href="/master"
					return
				}
				$("#user").html(user+(role==1?'(管理员)':''));
				if(!role || role != 1){
					$(".panel").remove(":contains('群发系统广播')");
				}
				if ('WebSocket' in window) {
					websocket = new WebSocket("ws://localhost:8080/webSocket/" + user);
				}
				websocket.onmessage = function (event) {
					var data = JSON.parse(event.data);
					if (data.to == 0) {//上线消息
						if (data.text != user) {
							$("#users").append('<div style="display: flex;\n' +
									'    border-bottom: 1px solid lightblue;"><img style="border-radius: 23px;\n' +
									'    width: 35px;\n' +
									'    height: 35px;" src="'+data.picture+'"><a href="#" style="    width: 100%;\n' +
									'    border: none;" onclick="talk(this)" class="list-group-item">' + data.text + '</a></div>');
							// alert(data.text + "上线了");
						}
					} else if (data.to == -2) {//下线消息
						if (data.text != user) {
							$("#users > div").remove(":contains('" + data.text + "')");
							// alert(data.text + "下线了");
						}
					} else {
						// 普通消息
						// 接收服务端的实时消息并添加到HTML页面中
						$("#log-container").append("<div class='bg-info'><label class='text-danger'>" + data.from + "&nbsp;" + data.date + "</label><div class='text-success'>" + data.text + "</div></div><br>");
						// 滚动条滚动到最低部
						scrollToBottom();
					}
				};

				$.post("/onlineusers?currentuser=" + user, function (data) {
					for (var i = 0; i < data.length; i++)
						$("#users").append('<div style="display: flex;\n' +
								'    border-bottom: 1px solid lightblue;"><img style="border-radius: 23px;\n' +
								'    width: 35px;\n' +
								'    height: 35px;" src="'+data[i].picture+'"><a href="#" style="    width: 100%;\n' +
								'    border: none;" onclick="talk(this)" class="list-group-item">' + data[i].username + '</a></div>');
				});

			});





			$("#broadcast").click(function () {
				var data = {};
				data["from"] = "系统消息";
				data["to"] = -1;
				data["text"] = $("#msg").val();
				websocket.send(JSON.stringify(data));
			});

			$("#send").click(function () {
				if ($("body").data("to") == undefined) {
					alert("请选择聊天对象");
					return false;
				}
				var data = {};
				data["from"] = user;
				data["to"] = $("body").data("to");
				data["text"] = $("#myinfo").val();
				websocket.send(JSON.stringify(data));
				$("#log-container").append("<div class='bg-success'><label class='text-info'>我&nbsp;" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</label><div class='text-info'>" + $("#myinfo").val() + "</div></div><br>");
				scrollToBottom();
				$("#myinfo").val("");
			});

		});

		function talk(a) {
			$("#talktitle").text("与" + a.innerHTML + "的聊天");
			$("body").data("to", a.innerHTML);
		}
		function scrollToBottom() {
			var div = document.getElementById('log-container');
			div.scrollTop = div.scrollHeight;
		}
	</script>

</body>

</html>